<!DOCTYPE html>
<html>
<head>
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
    <div id="placeholder"  style="position:absolute;left:20px;top:350px;width:600px;height:300px;"></div>
	<h3 style="position:absolute;left:270px;top:310px;">Accuracy</h3>
	<h3 style="position:absolute;left:890px;top:310px;">Coverage</h3>
	
	<div id="placeholder1" style="position:absolute;left:640px;top:350px;width:600px;height:300px;"></div>
	<div id="tt"  style="position:absolute;left:10px;top:20px;width:600px;height:300px;"></div>
<script type="text/javascript">
$(function () {
var options = {
		
        series: { shadowSize: 0 }, // drawing is faster without shadows
        yaxis: { min: 90, max: 100 },
        xaxis: { show: false }
    };
    var data = [];
        var t = 0;
    var placeholder1 = $("#placeholder1");
    
    $.plot(placeholder1, data, options);
        
        function fetchData() {
   $.ajax({
      url:      '/ajax/myjson2',
      method:   'GET',
      dataType: 'json',
      success:  function(json) {
             
             data.push([t++,json.value]);
         if(data.length>100){
                        data.shift();
                 }
         $.plot($('#placeholder1'), [data], options);
      },
          //error:function(a,b,c) { alert(b); }
   });

   setTimeout(fetchData, 100);
        }
        fetchData();
});
$(function () {
var options = {
        series: { shadowSize: 0 }, // drawing is faster without shadows
        yaxis: { min: 0, max: 100 },
        xaxis: { show: false }
    };
    var data = [];
        var t = 0;
    var placeholder = $("#placeholder");
    
    $.plot(placeholder, data, options);
        
        function fetchData() {
   $.ajax({
      url:      '/ajax/myjson',
      method:   'GET',
      dataType: 'json',
      success:  function(json) {
             
             data.push([t++,json.value]);
         if(data.length>100){
                        data.shift();
                 }
         $.plot($('#placeholder'), [data], options);
      },
          //error:function(a,b,c) { alert(b); }
   });

   setTimeout(fetchData, 100);
        }
        fetchData();
});



$(function () {
	var data = []; 
		var t = 0;	
    var tt = $("tt");
    
        function fetchData() {
   $.ajax({
      url:      '/ajax/myjson3',
      method:   'GET',
      dataType: 'json',
      success:  function(json) {
             data=json.value
			
			 $("#tt").html(data);
			
			 
        
      },
          //error:function(a,b,c) { alert(b); }
   });

   setTimeout(fetchData, 100);
        }
        fetchData();
});
</script>
</body>
</html>